<template>
    <!-- 已发货列表 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="发货主题：">
            <el-input v-model="formInline.SPRTopic" clearable />
        </el-form-item>
        <el-form-item label="应发日期：">
            <el-date-picker
                v-model="formInline.SRADueDate"
                type="date"
                style="width: 200px;"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
            -
            <el-date-picker
                v-model="formInline.SSRADueDate"
                type="date"
                style="width: 200px;"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item label="发货人：">
            <el-input v-model="formInline.SRAApplicant" clearable />
        </el-form-item>
        <el-form-item label="发货编号：">
            <el-input v-model="formInline.DeliveryConfirmationNumber" clearable />
        </el-form-item>
        <el-form-item label="关联客户/供应商：">
            <el-input v-model="formInline.VName" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetDeli">查询</el-button>
        </el-form-item>
    </el-form>
            <h2 style="text-align: center;">已发货列表</h2>
            <br/>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="180" align="center"/>
        <el-table-column prop="sprTopic" label="发货确认主题" width="180" align="center"/>
        <el-table-column prop="kuaiDiNumber" label="单据编号" width="180" align="center"/>
        <el-table-column prop="addName" label="申请人" width="180" align="center"/>
        <el-table-column prop="sraDueDate" label="已发日期" width="180" align="center">
            <template v-slot="scope">
                {{ scope.row.sraDueDate.replace("T", " ")}}
            </template>
        </el-table-column>
        <el-table-column prop="pricesss" label="快递费用(元)" width="180" align="center"/>
        <el-table-column prop="sraApplicant" label="发货人" width="180" align="center"/>
        <el-table-column prop="vName" label="客户/供应商" width="210" align="center"/>
    </el-table>



<!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="page.sumCount">
                    <span> , 每页 {{ page.PageSize }} 条，当前 {{ page.PageIndex }} / {{ page.pageLast }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="page.sumCount">
                    <el-button :disabled="page.PageIndex == 1" @click="page.PageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="page.sumCount">
                    <el-button :disabled="page.PageIndex == page.pageLast" @click="page.PageIndex = page.pageLast">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>






    
</template>
    
<script setup lang='ts'>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter ,useRoute} from 'vue-router';
const router = useRouter();
const route = useRoute();
import http from '../../../http.js'

onMounted(() => {
    GetDeli();//显示确认发货
})

const formInline = reactive({
    SPRTopic: '',
    SRADueDate: '',
    SSRADueDate: '',
    SRAApplicant: '',
    DeliveryConfirmationNumber: '',
    VName:''
})

const page = reactive({
    PageIndex: 1,
    PageSize: 5,
    sumCount: 0,
    pageLast:0
})

const tableData=ref([])
const GetDeli = () => {
    axios.get(http.zblnb + '/erpck/api/Ship/GetDeliveryConfirmation', {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            SPRTopic: formInline.SPRTopic,
            SRADueDate: formInline.SRADueDate,
            SSRADueDate: formInline.SSRADueDate,
            DeliveryConfirmationNumber: formInline.DeliveryConfirmationNumber,
            VName:formInline.VName
        }
    })
    .then(res => {
        console.log(res)    
        tableData.value=res.data.data.list
        page.sumCount = res.data.data.sumCount
        page.pageLast=res.data.data.pageLast
    })
    .catch(err => {
        console.log(err)    
    })
}


    
</script>
    
<style>
    
</style>